<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- 引入 jQuery Mobile 样式 -->
    <link
      rel="stylesheet"
      href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
    />

    <!-- 引入 jQuery 库 -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <!-- <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> -->
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet" />

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
    />
    <!-- Swiper's JS -->
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }
      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }
      .swiper-container {
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transition: 300ms;
        transform: scale(0.8);
      }
      .swiper-slide-active,
      .swiper-slide-duplicate-active {
        transform: scale(1);
      }
      #content::before {
        content: "";
        position: absolute;
        top: -0.53333333vw;
        left: 0;
        width: 100%;
        height: 50.66666667vw;
        background: url(https://gw.alicdn.com/tfs/TB11h1E4YY1gK0jSZTEXXXDQVXa-750-300.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: top;
        z-index: -1;
      }
      #area {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .name-text {
        font-size: 18px;
        color: #2e333e;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <div id="content" class="layui-container-fluid" style="padding-top: 50px">
      <!-- 常规布局（以中型屏幕桌面为例）： -->
      <div
        class="layui-row"
        style="
          border-radius: 10px;
          margin: 15px 12px;
          background-color: #fff;
          padding: 15px 12px;
        "
      >
        <div class="layui-row">
          <div class="layui-col-xs12">
            <span class="name-text">横店电影城(郑州大融城店)</span>
          </div>
        </div>

        <div class="layui-row" style="margin-top: 10px">
          <!-- 正在热映 -->
          <div id="area" class="layui-col-xs10">
            <span style="font-size: 12px; color: #2e333e"
              >管城回族区东太康路72号大融城商城7楼
              可乘坐商场东侧（北顺城街）7号观光电梯直达7楼</span
            >
          </div>
        </div>
        <div class="layui-row" style="margin-top: 10px">
          <div class="layui-col-xs10" style="color: #ccc; font-size: 12px">
            即将上映·儿童优惠·观影小食·可停车
          </div>
        </div>
        <div class="layui-row">
          <div
            class="layui-col-xs12"
            style="color: #fc9f58; margin-top: 10px; background-color: #fff7df"
          >
            " 观影需出示48小时内核酸证明 "
          </div>
        </div>
      </div>
    </div>
    <div id="time-con" class="layui-container-fluid">
      <div class="layui-row">
        <div class="layui-col-xs12" style="color: #ccc">
          <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="mv_inf" style="background-color: #fff">
        <!-- <div class="layui-row">
          <div
            class="layui-col-xs6 layui-col-xs-offset3"
            style="color: #fc9f58; margin-top: 10px"
          >
            " 观影需出示48小时内核酸证明 "
          </div>
        </div>
        <div class="layui-row">
          <div
            class="layui-col-xs6 layui-col-xs-offset3"
            style="color: #fc9f58; margin-top: 10px"
          >
            " 观影需出示48小时内核酸证明 "
          </div>
        </div> -->
      </div>

      <div
        class="layui-row"
        style="background-color: #fff; padding-bottom: 10px"
      >
        <div
          class="layui-col-xs6 layui-col-xs-offset1"
          style="color: #fc9f58; margin-top: 10px"
        >
          <span style="color: #000; font-weight: 600">今天 08-19</span>
        </div>
      </div>

      <!-- <div
        class="layui-row"
        style="
          margin-top: 20px;
          border: 1px red solid;
          border-radius: 10px;
          padding: 0px 12px 0px 12px;
          background-color: #fff;
        "
      >
        <div class="layui-row">
          <div
            class="layui-col-xs2 layui-col-xs-offset1"
            style="color: #fc9f58"
          >
            开始时间
          </div>
          <div class="layui-col-xs3" style="color: #fc9f58">国语</div>
          <div class="layui-col-xs3" style="color: #fc9f58">新人特价 ></div>
          <div class="layui-col-xs2 layui-btn" style="color: #fc9f58">购票</div>
        </div>
        <div class="layui-col-xs2 layui-col-xs-offset1" style="color: #fc9f58">
          结束时间
        </div>
        <div class="layui-col-xs2 layui-col-xs-offset1" style="color: #fc9f58">
          厅
        </div>
      </div> -->
    </div>

    <script>
      var swiper = new Swiper(".swiper-container", {
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
      $(function () {
        // 搜索
        search(arr);
      });
      var pages = 1;
      var arr = [];

      ajaxs(pages);
      function ajaxs(pages) {
        $.ajax({
          url: "https://liu.zzgoodqc.cn/movie/list",
          type: "get",
          data: {
            page: pages,
          },
          dataType: "json",
          success: function (res) {
            for (let i in res.coming) {
              arr.push(res.coming[i]);
            }
            if (pages <= 4) {
              ajaxs(pages + 1);
            } else {
              return;
            }
            search(arr);
          },
        });
      }
      function search(arr) {
        if (arr.length === 40) {
          getArr(arr);
        }
      }
      function getArr(arr) {
        var id = JSON.parse(localStorage.getItem("id"));
        arr.map(function (item, index) {
          if (item.id == id) {
            data = {
              nm: item.nm,
              version: item.version,
            };
            localStorage.setItem("data", JSON.stringify(data));
            // 次数
            let showst = item.showst;
            let html = "";
            let mv_html = "";
            mv_html += `
            <div class="layui-row" style="; margin-top: 10px;" >
              <div
                class="layui-col-xs9 layui-col-xs-offset3"
                style="font-size:17px;margin-top: 10px;"
              >
               ${item.nm} 
              </div>
              <div
                class="layui-col-xs9 layui-col-xs-offset3"
                style="font-size:17px"
              >
              <span style="color: #fc9f58;">${
                item.sc == 0 ? "暂无评分" : `淘票票评分为${item.sc}`
              }
              </div>
            </div>
            <div class="layui-row">
              <div
                class="layui-col-xs6 layui-col-xs-offset3"
                style="color: #fc9f58; margin-top: 10px"
              >
               <span style="font-size:12px; color:#ccc">120分钟 | ${
                 item.star
               }</span>
              </div>
            </div>
            `;
            $(".mv_inf").html(mv_html);
            if (showst == 0) {
              $("#time-con").html(`
                <div class="layui-row"
                    style="
                    margin-top: 20px;
                    border: 1px red #fff;
                    border-radius: 10px;
                    padding: 8px 12px 8px 12px;
                    background-color: #fff;
                  "
                  >
                  <div
                    class="layui-col-xs2 layui-col-xs-offset1"
                    style="color: balck;font-size:25px"
                  >
                  暂无场次
                  </div>
              </div>
              `);
            }
            for (let i = 1; i <= showst; i++) {
              html += `
            <div class="layui-row"
            style="
          margin-top: 20px;
          border: 1px red #fff;
          border-radius: 10px;
          padding: 8px 12px 8px 12px;
          background-color: #fff;
        "
            >
              <div class="layui-row">
                <div
                  class="layui-col-xs2 layui-col-xs-offset1"
                  style="color: balck"
                >
                  14:30
                </div>
                <div class="layui-col-xs2" style="color:#5f6672;font-size:12px" >${
                  item.version == "v2d imax" ? "国语2D" : "国语3D"
                }</div>
                <div class="layui-col-xs4" style="color: red">新人价￥34.9元起</div>
                <div class="layui-col-xs2 layui-col-xs-offset1 layui-btn layui-btn-radius layui-btn-sm" onclick="purBtn()" style="color:#ff3d5c;background-color:#ffeaea;margin-top: 10px;">购票</div>
              </div>
              <div class="layui-col-xs2 layui-col-xs-offset1">
              <span style="font-size:12px; color:#ccc">16:38散场</span>
              </div>
              <div class="layui-col-xs5 layui-col-xs-offset1" >
                <span style="font-size:12px; color:#ccc">6号厅（杜比全景声）</span>
              </div>
            </div>
            `;
            }
            $("#time-con").append(html);
          }
        });
      }
      // 点击购票
      function purBtn() {
        //跳转页面
        window.location.href =
          "http://127.0.0.1:5500/JS/%E8%80%83%E8%AF%95/8.19%E8%80%83%E8%AF%95/index3.html";
      }
    </script>
  </body>
</html>
